<template>
    <div id="videoo">
        <vue3VideoPlay id="myVideo" v-bind="options" :poster=reccourselData.courseCover
            @onloadedmetadata=getVideoDuration />
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from "element-plus";
import axios from '../../api/index';
import { useRoute, useRouter } from 'vue-router';
import 'vue3-video-play/dist/style.css'
import Vue3VideoPlay from 'vue3-video-play';
// import { vi } from 'element-plus/es/locale';



export default {
    setup() {
        const route = useRoute();
        const router = useRouter();
        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        const reccourselData = ref({});
        let goodstate = ref({});

        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);

        const itemId = route.params.goodId;
        const options = reactive({
            currentTime: '', //从上次停止处开始播放
            width: '1135px', //播放器高度
            height: '550px', //播放器高度
            color: "#409eff", //主题色
            title: '', //视频名称
            src: '', //视频源
            muted: false, //静音
            webFullScreen: false,
            speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
            autoPlay: false, //自动播放
            loop: false, //循环播放
            mirror: false, //镜像画面
            ligthOff: false,  //关灯模式
            volume: 0.3, //默认音量大小
            control: true, //是否显示控制
            controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'], //显示所有按钮,
        })

        //请求该课程的参数
        onMounted(async () => {
            try {

                //发起请求拿取用户与课程的关系表
                axios.get('/goodState/findGStateByUIdGId', {
                    params: {
                        userId: userInfo.id,
                        goodId: itemId
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(response => {
                    if (response.code === 200) {
                        //将上次播放的时间给播放器
                        console.log(response.data);
                        goodstate.value = response.data;
                        options.currentTime = response.data.currentTime;

                        //再去查询该课程的全部信息
                        axios.get('/course/findById', {
                            params: {
                                courseId: itemId
                            },
                            headers: {
                                token: token,
                                longtoken: longtoken
                            }
                        }).then(response => {
                            if (response.code === 200) {
                                //将视频地址给播放器
                                console.log(response.data);
                                reccourselData.value = response.data;
                                options.src = response.data.goodAddress;
                                let videoElement = document.getElementById("myVideo");
                                videoElement.addEventListener("loadedmetadata", function () {
                                    console.log("视频的总播放时长是：" + videoElement.duration);
                                    //将视频总时长进行修改时长
                                    axios.get('/goodState/updateTotalDuration', {
                                        params: {
                                            goodId: itemId,
                                            totalTime: videoElement.duration
                                        },
                                        headers: {
                                            token: token,
                                            longtoken: longtoken
                                        }
                                    }).then(response => {
                                       
                                    })
                                })

                                //获取页面关闭时视频最后播放的时间
                                window.addEventListener('beforeunload', function () {
                                    const currentTime = videoElement.currentTime;
                                    console.log('最后观看视频播放时长：', currentTime);
                                    console.log(itemId);
                                    //发起请求存储最后观看时间
                                    axios.get('/goodState/updateCurrentTime', {
                                        params: {
                                            userId: userInfo.id,
                                            currentTime: currentTime,
                                            goodId: itemId
                                        },
                                        headers: {
                                            token: token,
                                            longtoken: longtoken
                                        }
                                    }).then(response => {
                                        if (response.code === 200) {
                                            console.log(更新成功);
                                        } else {
                                            console.log(更新失败);
                                        }
                                    })
                                });
                            }
                        })

                    } else {
                        ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }

        });
        return {
            goodstate,
            reccourselData,
            options,
            route,
            router,
            token,
            longtoken,
            itemId,
        }
    }
}
</script>
 
<style>
#videoo {
    margin-left: 20px;
}
</style>